<template>
  <div>
    <div style="margin-bottom: 5px;">
      <el-input v-model="input" placeholder="请输入要查询的货物信息" suffix-icon="el-icon-search" style="width: 200px;"> </el-input>
      <el-button type="primary" style="margin-left: 5px;" @click="Goods">查询</el-button>
    </div>
    <div v-if="tableData.length">
      <div v-for="item in tableData" :key="item.id" class="goods-item">
        <p><strong>ID:</strong> {{ item.id }}</p>
        <p><strong>货物名字:</strong> {{ item.name }}</p>
        <p><strong>货物现在所在地址:</strong> {{ item.goodslocal }}</p>
      </div>
    </div>
    <div v-else>
      <p>无结果显示</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsManagerForm',
  data() {
    return {
      input: '',
      tableData: []
    }
  },
  methods: {
    Goods() {
      if (!this.input) {
        this.$message.error('请输入要查询的货物信息');
        return;
      }
      this.$axios.get(`${this.$httpUrl}/goods/info/${this.input}`)
          .then(response => {
            const res = response.data;
            if (res.code === 200) {
              if (res.data && typeof res.data === 'object' && res.data !== null) {
                this.tableData = [res.data];
                this.$message.success('数据加载成功');
              } else {
                console.warn('Expected an object, but got:', typeof res.data);
                this.$message.error('请输入正确的信息，请重试');
                this.tableData = [];
              }
            } else {
              this.$message.error('获取数据失败：' + (res.msg || '未知错误'));
            }
          })
          .catch(error => {
            console.error('Error fetching data:', error);
            this.$message.error('请求数据出错: ' + error.message);
          });
    }
  }
}
</script>

<style>
</style>